<template>
    <div id="order">
        <div class="header">
            <van-nav-bar title="不凡" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <div class="content">
            <div class="address" @click="detailAddress">
                <div class="item">
                    <div class="addresslist">
                        <div>
                            <p>{{address.name}}</p>
                            <div v-if="address.is_default" class="moren">默认</div>
                        </div>
                        <div class="info">
                            <p>{{address.mobile}}</p>
                            <p>{{address.address+address.address_detail}}</p>
                        </div>
                        <div></div>
                    </div>
                </div>
            </div>
            <div class="orderBox">
                <div class="item">
                    <div>商品合计</div>
                    <div>￥{{allPrice}}</div>
                </div>
                <div class="item">
                    <div>运费</div>
                    <div>免运费</div>
                </div>
                <div class="item">
                    <div>优惠券</div>
                    <div>暂无</div>
                </div>
            </div>
            <div class="cartlist">
                <div class="item" v-for="(item,index) in listData" :key="index">
                    <div class="con">
                        <div class="left">
                            <div class="img">
                                <img :src="item.list_pic_url" alt />
                            </div>
                            <div class="info">
                                <p>{{item.goods_name}}</p>
                                <p>￥{{item.retail_price}}</p>
                            </div>
                        </div>
                        <div class="right">
                            <div class="num">x{{item.number}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div>实付 : ￥{{allPrice}}</div>
                <div @click="pay">支付</div>
            </div>
        </div>
    </div>
</template>
<script>
import { detailAction } from "@/api/order";
import { Toast } from "vant";
export default {
    data() {
        return {
            addressId: "",
            openId: "",
            allPrice: "",
            address: {},
            listData: [],
        };
    },
    created() {
        this.addressId = localStorage.getItem("addressId");
        this.openId = localStorage.getItem("openId");
        this.detailAddressData();
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        detailAddress() {
            this.$router.push("/pages/addressSelect");
        },
        async detailAddressData() {
            const data = await detailAction({
                openId: this.openId,
            });
            console.log(data);
            if (data) {
                this.allPrice = data.allPrise;
                this.listData = data.goodsList;
                this.address = data.address;
            }
            console.log(this.allPrice, this.listData, this.address);
        },
        pay(){
            Toast({
                message:'支付功能暂未开放',
                icon:'none'
            })
        }
    },
};
</script>
<style lang="scss" scoped>
#order {
    height: 100vh;
    background: #f4f4f4;
    border-top: 1px solid transparent;
    font-size: 0.32rem;
    padding-bottom: 1.333333rem;
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }
    .content {
        height: calc(100vh - 1.24rem);
        margin-top: 1.22667rem;
        overflow: auto;
        border-top: 0.01333rem solid transparent;
        .address {
            padding: 0.66667rem 0 0.4rem 0;
            margin-bottom: 0.26667rem;
            background: url("../../../assets/images/address-bg-bd.png") 0 0
                repeat-x #fff;
            .item {
                padding: 0 0.26667rem;
                .addresslist {
                    width: 100%;
                    position: relative;
                    transition: all 0.3s ease;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    :first-child {
                        width: 1.33333rem;
                        text-align: center;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        align-self: flex-start;
                        .moren {
                            width: 0.8rem;
                            height: 0.4rem;
                            border: 0.01333rem solid #b4282d;
                            text-align: center;
                            line-height: 0.4rem;
                            color: #b4282d;
                            margin: 0.13333rem auto 0 auto;
                        }
                    }
                    .info {
                        padding: 0 0.26667rem;
                        flex: 1;
                        text-align: left;
                        :nth-child(2) {
                            margin-top: 0.06667rem;
                            color: #666;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                    :nth-child(3) {
                        width: 0.66667rem;
                        height: 0.66667rem;
                        margin: 0 0.26667rem;
                        background: url("../../../assets/images/address_right.png")
                            no-repeat;
                        background-size: 100% 100%;
                    }
                }
            }
        }
        .orderBox {
            padding: 0 0.4rem;
            background: #fff;
            .item {
                padding: 0.4rem 0;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #d9d9d9;
            }
        }
        .cartlist {
            background: #fff;
            margin-bottom: 1.46667rem;
            margin-top: 0.26667rem;
            .item {
                padding: 0.26667rem 0;
                border-bottom: 1px solid #f4f4f4;
                position: relative;
                .con {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    transition: all 0.3s ease;
                    .left {
                        display: flex;
                        align-items: center;
                        width: 80%;
                        height: 2.506667rem;
                        .img {
                            height: 1.66667rem;
                            width: 1.66667rem;
                            display: block;
                            background: #f4f4f4;
                            margin-left: 0.26667rem;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .info {
                            width: 50%;
                            padding: 0.26667rem;
                            p {
                                line-height: 0.53333rem;
                                text-align: left;
                            }
                        }
                    }
                    .right {
                        padding-right: 0.66667rem;
                    }
                }
            }
        }
        .bottom {
            position: fixed;
            bottom: 0;
            height: 1.33333rem;
            width: 100%;
            display: flex;
            background: #fff;
            :first-child {
                flex: 1;
                line-height: 1.33333rem;
                padding-left: 0.26667rem;
                text-align: left;
            }
            :nth-child(2) {
                width: 2.66667rem;
                height: 1.33333rem;
                text-align: center;
                line-height: 1.33333rem;
                font-size: 0.38667rem;
                background: #b4282d;
                color: #fff;
            }
        }
    }
}
</style>